<template>
  <view class="goods-card" @click="goDetail(data)">
    <u-image
      width="342rpx"
      height="360rpx"
      :src="data.coverImage"
      mode="scaleToFill"
    ></u-image>
    <!--    <view class="coupon flex color-white px-12 justify-between">-->
    <!--      <view class="ellipsis-1 text-10">新人卷活动</view>-->
    <!--      <view class="ellipsis-1 text-10"> 10.10 12:00 开抢 </view>-->
    <!--    </view>-->
    <view class="px-8 over-hidden">
      <view class="ellipsis-2 text-12 pt-10">
        {{ data.goodsName }}
      </view>
      <!--      <view class="ellipsis-1 text-10 color-warning pt-4">-->
      <!--        含钙量国家高钙标准3配-->
      <!--      </view>-->
      <!--      <view class="ellipsis-1 text-10 color-gray pt-4">-->
      <!--        已售14.0万 | 惊艳度50%-->
      <!--      </view>-->
      <!--      <view class="flex gap-8 pt-4">-->
      <!--        <view class="tag-error"> 8袋减120元 </view>-->
      <!--        <view class="tag-error"> 8袋减120元 </view>-->
      <!--      </view>-->
      <view class="flex gap-8 py-12 justify-between items-center">
        <view class="text-red ellipsis-1 text-10">
          <text>￥</text>
          <text class="text-14">{{ data.goodsPriceMax }}</text>
          <text>起 到手价</text>
          <text class="color-gray">￥{{ data.goodsPriceMin }}</text>
        </view>
        <view class="plus-icon">
          <u-icon name="plus" size="24rpx" color="#fff"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "WaterfallItem",
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {};
  },
  methods: {
    goDetail(item) {
      console.log(item);
      this.$Router.push({
        name: "goodsDetail",
        params: { serialNo: item.serialNo },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-card {
  width: 342rpx;
  border-radius: 16rpx;
  overflow: hidden;
  background: #fff;
  box-shadow: 0rpx 4rpx 20rpx rgba(0, 0, 0, 0.06);
  margin-bottom: 18rpx;

  .coupon {
    height: 50rpx;
    line-height: 50rpx;
    background: linear-gradient(to right, #df4843, #ea9d56);
  }

  .tag-error {
    color: $u-error;
    border-radius: 8rpx;
    border: solid 1px $u-error;
    font-size: 20rpx;
    padding: 2rpx 8rpx;
  }

  .plus-icon {
    width: 44rpx;
    height: 44rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: $u-primary;
  }
}
</style>
